/*
 Licensed to Cloudera, Inc. under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  Cloudera, Inc. licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

@cui-base-color-list:
  gray, ~"blue-gray", blue, steel, teal, green, lime, yellow, orange, red, pink, purple,
  ~"purple-gray", ~"green-gray";

@cui-service-color-list:
  ~"hive-color", ~"hdfs-color", ~"hbase-color", ~"hue-color", ~"mapreduce-color", ~"zookeeper-color", ~"oozie-color",
  ~"flume-color", ~"impala-color", ~"sqoop-color", ~"solr-color", ~"spark-color", ~"pig-color", ~"yarn-color",
  ~"s3-color", ~"api-color";

// Base colors ----------------------------------------------

@cui-black:                       #000000;
@cui-blue-gray:                   @cui-blue-gray-500;
@cui-blue:                        @cui-blue-500;
@cui-gray:                        @cui-gray-500;
@cui-green-gray:                  @cui-green-gray-500;
@cui-green:                       @cui-green-500;
@cui-lime:                        @cui-lime-500;
@cui-mintish:                     #1fcfb8;
@cui-oozie-blue:                  #0050a2;
@cui-oozie-yellow:                #fff300;
@cui-orange:                      @cui-orange-500;
@cui-pink:                        @cui-pink-500;
@cui-purple-gray:                 @cui-purple-gray-500;
@cui-purple:                      @cui-purple-500;
@cui-red:                         @cui-red-500;
@cui-slate:                       #305868;
@cui-steel:                       @cui-steel-500;
@cui-teal:                        @cui-teal-500;
@cui-white:                       #FFFFFF;
@cui-yellow:                      @cui-yellow-500;

// All standard colors --------------------------------------

@cui-gray-040:                    #fafbfc;
@cui-gray-050:                    #f4f5f6;
@cui-gray-100:                    #f1f2f3;
@cui-gray-200:                    #eaebec;
@cui-gray-300:                    #d6d8db;
@cui-gray-400:                    #adb2b6;
@cui-gray-500:                    #989ea4;
@cui-gray-600:                    #838b92;
@cui-gray-700:                    #5a656d;
@cui-gray-800:                    #333e47;
@cui-gray-900:                    #1b2329;

@cui-blue-010:                    rgba(230, 247, 255, 0.1); // 10% of cui-blue-050
@cui-blue-050:                    #e6f7ff;
@cui-blue-100:                    #a3dfff;
@cui-blue-200:                    #7accff;
@cui-blue-300:                    #51b5fc;
@cui-blue-400:                    #008cff;
@cui-blue-500:                    #006ee3;
@cui-blue-600:                    #0058bd;
@cui-blue-700:                    #004496;
@cui-blue-800:                    #002f70;
@cui-blue-900:                    #001c4a;

@cui-green-050:                   #f2ffeb;
@cui-green-100:                   #cbf1b5;
@cui-green-200:                   #aee390;
@cui-green-300:                   #82c25d;
@cui-green-400:                   #5aa232;
@cui-green-500:                   #3a870e;
@cui-green-600:                   #2c6c08;
@cui-green-700:                   #1a4700;
@cui-green-800:                   #163c00;
@cui-green-900:                   #133300;

@cui-yellow-050:                  #fffaed;
@cui-yellow-100:                  #fff1cc;
@cui-yellow-200:                  #ffd664;
@cui-yellow-300:                  #fdc926;
@cui-yellow-400:                  #d99f18;
@cui-yellow-500:                  #a16908;
@cui-yellow-600:                  #804a00;
@cui-yellow-700:                  #663a00;
@cui-yellow-800:                  #4d2b00;
@cui-yellow-900:                  #331d00;

@cui-orange-010:                  rgba(255, 240, 217, 0.3); // 30% of cui-orange-050
@cui-orange-050:                  #fff0d9;
@cui-orange-100:                  #ffd599;
@cui-orange-200:                  #ffa319;
@cui-orange-300:                  #ff8400;
@cui-orange-400:                  #f96600;
@cui-orange-500:                  #b34d00;
@cui-orange-600:                  #8c3800;
@cui-orange-700:                  #662500;
@cui-orange-800:                  #401500;
@cui-orange-900:                  #260d00;

@cui-red-050:                     #fff2f2;
@cui-red-100:                     #fdcfcf;
@cui-red-200:                     #faadac;
@cui-red-300:                     #f36d6b;
@cui-red-400:                     #e83934;
@cui-red-500:                     #d9150c;
@cui-red-600:                     #bf1408;
@cui-red-700:                     #990d00;
@cui-red-800:                     #670901;
@cui-red-900:                     #3f0600;

@cui-purple-050:                  #f4f1fa;
@cui-purple-100:                  #d5c9ed;
@cui-purple-200:                  #ab93dc;
@cui-purple-300:                  #9678d3;
@cui-purple-400:                  #8263c2;
@cui-purple-500:                  #6f47bf;
@cui-purple-600:                  #552da6;
@cui-purple-700:                  #4a1ca6;
@cui-purple-800:                  #33058d;
@cui-purple-900:                  #1e005a;

// Old color set --------------------------------------------
@cui-blue-gray-050:               #ECEFF1;
@cui-blue-gray-100:               #CFD8DC;
@cui-blue-gray-200:               #B0BEC5;
@cui-blue-gray-300:               #90A4AE;
@cui-blue-gray-400:               #78909C;
@cui-blue-gray-500:               #607D8B;
@cui-blue-gray-600:               #546E7A;
@cui-blue-gray-700:               #455A64;
@cui-blue-gray-800:               #36454F;
@cui-blue-gray-900:               #232C34;

@cui-steel-050:                   #E8EEEE;
@cui-steel-100:                   #C6D6D6;
@cui-steel-200:                   #A0BABA;
@cui-steel-300:                   #7A9F9F;
@cui-steel-400:                   #5D8A8A;
@cui-steel-500:                   #417575;
@cui-steel-600:                   #3C6C6C;
@cui-steel-700:                   #345E5E;
@cui-steel-800:                   #2D5252;
@cui-steel-900:                   #274646;

@cui-teal-050:                    #E0F6F5;
@cui-teal-100:                    #B3EAE6;
@cui-teal-200:                    #80DCD5;
@cui-teal-300:                    #4DCEC4;
@cui-teal-400:                    #26C3B7;
@cui-teal-500:                    #00B9AA;
@cui-teal-600:                    #00AA9D;
@cui-teal-700:                    #009488;
@cui-teal-800:                    #008177;
@cui-teal-900:                    #006F66;

@cui-lime-010:                    #F4F9ED;
@cui-lime-050:                    #EDF5E2;
@cui-lime-100:                    #D2E6B9;
@cui-lime-200:                    #B4D689;
@cui-lime-300:                    #96C55A;
@cui-lime-400:                    #7FB836;
@cui-lime-500:                    #69AC13;
@cui-lime-600:                    #619F12;
@cui-lime-700:                    #548A0F;
@cui-lime-800:                    #49780D;
@cui-lime-900:                    #3F670B;

@cui-pink-010:                    #FBF5F5;
@cui-pink-050:                    #F2DEDE;
@cui-pink-100:                    #F3BFD4;
@cui-pink-200:                    #EC93B7;
@cui-pink-300:                    #E4689A;
@cui-pink-400:                    #DE4784;
@cui-pink-500:                    #D8276F;
@cui-pink-600:                    #C72466;
@cui-pink-700:                    #AD1F59;
@cui-pink-800:                    #971B4D;
@cui-pink-900:                    #821743;

@cui-purple-gray-050:             #F1EFEF;
@cui-purple-gray-100:             #D5CFD1;
@cui-purple-gray-200:             #BAB0B3;
@cui-purple-gray-300:             #ACA0A4;
@cui-purple-gray-400:             #9F9095;
@cui-purple-gray-500:             #977F86;
@cui-purple-gray-600:             #837077;
@cui-purple-gray-700:             #766168;
@cui-purple-gray-800:             #6A575D;
@cui-purple-gray-900:             #5E4D53;

@cui-green-gray-050:              #E9E8E3;
@cui-green-gray-100:              #C8C6BA;
@cui-green-gray-200:              #B2AF9F;
@cui-green-gray-300:              #A7A391;
@cui-green-gray-400:              #9C9883;
@cui-green-gray-500:              #918D76;
@cui-green-gray-600:              #827E6A;
@cui-green-gray-700:              #74705E;
@cui-green-gray-800:              #656252;
@cui-green-gray-900:              #575446;

// Service colors -------------------------------------------

@cui-hive-color:                  @cui-yellow-700;
@cui-hdfs-color:                  @cui-teal-600;
@cui-hbase-color:                 @cui-pink-600;
@cui-hue-color:                   @cui-purple-300;
@cui-mapreduce-color:             @cui-steel-400;
@cui-zookeeper-color:             @cui-lime-600;
@cui-oozie-color:                 @cui-blue-500;
@cui-flume-color:                 @cui-orange-600;
@cui-impala-color:                @cui-blue-600;
@cui-sqoop-color:                 @cui-green-600;
@cui-solr-color:                  @cui-pink-600;
@cui-spark-color:                 @cui-orange-600;
@cui-pig-color:                   @cui-purple-600;
@cui-yarn-color:                  @cui-yellow-600;
@cui-s3-color:                    @cui-orange-500;
@cui-api-color:                   @cui-gray-700;

/*
  -- Color Class Generator -------------------------------------
  Can be used to generate color classes for all shades and tints.
  Takes two parameters, the first is the name of the color and should
  be a defined cui-color, the second parameter is optional and is for
  adding a prefi to the class name.

  .cui-generate-color-classes(@color, @class-prefix) {}

  Example usage:

  .generate-color-classes(gray, demo-colors__square--);

  will produce:

    .demo-colors__square--gray {
      background-color: #B4B4B4;
    }
    .demo-colors__square--gray-050 {
      background-color: #F8F8F8;
    }
    .demo-colors__square--gray-100 {
      background-color: #E7E7E7;
    }
    .demo-colors__square--gray-200 {
      background-color: #E0E0E0;
    }
    .demo-colors__square--gray-300 {
      background-color: #DCDCDC;
    }
    .demo-colors__square--gray-400 {
      background-color: #C8C8C8;
    }
    .demo-colors__square--gray-500 {
      background-color: #B4B4B4;
    }
    .demo-colors__square--gray-600 {
      background-color: #A0A0A0;
    }
    .demo-colors__square--gray-700 {
      background-color: #787878;
    }
    .demo-colors__square--gray-800 {
      background-color: #424242;
    }
    .demo-colors__square--gray-900 {
      background-color: #212121;
    }

    Note: For color names with dash (-) e.g. blue-gray use ~"blue-gray"
 */

.generate-color-scales-classes-recursive(@color, @i: 1) when (@i =< 9) {
  @scale-number: @i*100;
  @color-var-name: ~"cui-@{color}-@{scale-number}";

  .@{class-prefix}@{color}-@{scale-number} {
    background-color: @@color-var-name;
  }
  .generate-color-scales-classes-recursive(@color, (@i + 1));
}

.cui-generate-color-base-class(@color, @class-prefix) {
  @base-color: ~"cui-@{color}";

  .@{class-prefix}@{color} {
    background-color: @@base-color;
  }
}

.cui-generate-color-classes(@color, @class-prefix) {
  @color-050: ~"cui-@{color}-050";

  // Generate base color class
  .cui-generate-color-base-class(@color, @class-prefix);

  // Generate tint 050 color class
  .@{class-prefix}@{color}-050 {
    background-color: @@color-050;
  }

  // Generate the tints 100-900 classes
  .generate-color-scales-classes-recursive(@color);
};
